@clsName: theme-edit;

.getHeight() {
  width: 100%;
  height: 100%;
}

.getDisply() {
  display: flex;
}

.@{clsName} {
  .getHeight();

  .ant-spin-nested-loading {
    .getHeight();
  }

  .ant-spin-container {
    .getHeight();
  }

  .@{clsName}-layout {
    .getHeight();
    background: #fff;
    margin: 0px !important;

    .ant-form-item {
      margin-bottom: 10px;
    }

    .@{clsName}-menu {
      background: #fafafa;
      border: 1px solid #f0f0f0;
      .getHeight();
      .getDisply();

      .@{clsName}-side {
        width: 25%;
        height: 100%;
        overflow: hidden;

        .@{clsName}-side-child {
          background: rgba(0, 0, 0, 0.65);
          height: 100%;
          width: 100%;

          .@{clsName}-side-logo {
            display: flex;
            align-items: center;
            width: 100%;
            height: 48px;
            padding: 5px 24px;

            img {
              height: 28px;
              width: 28px;
            }

            h3 {
              color: #ffffff;
              margin: 0px 0px 0px 8px;
              font-weight: bold;
            }
          }
        }
      }

      .@{clsName}-content {
        width: 75%;
        display: flex;
        flex-direction: column;
        height: 100%;
        overflow: hidden;

        .@{clsName}-head {
          height: 48px;
          width: 100%;
          // background: #ffffff;
          // border-bottom: 1px solid #f0f0f0;
        }

        .@{clsName}-tabs {
          height: 10%;
          flex: auto;
          // overflow-y: auto;
          // overflow-x: hidden;
          overflow: hidden;

          .ant-tabs {
            height: 100%;

            .ant-tabs-nav {
              margin: 0px;
            }
          }
        }
      }
    }
  }
}

.@{clsName}-design {
  display: flex;
  justify-content: space-between;
  align-items: center;
  // margin-bottom: 1rem;

  .@{clsName}-design-pop {
    width: 2rem;
    height: 2rem;
    border-radius: 3px;
    border: 1px solid #f0f0f0;
    cursor: pointer;
    padding: 0.44rem;
  }
}

.@{clsName}-fontSizeLayout {
  width: 100%;

  dl {
    border: 1px solid #dbdbdb;
    padding: 15px 10px;
    margin-bottom: 0px;
    text-align: center;
    position: relative;
    border-radius: 3px;

    dt {
      font-weight: 600;
    }

    dd {
      margin-bottom: 0px;
    }

    .anticon {
      font-size: 50px;
      position: absolute;
      right: -1px;
      bottom: -1px;
    }
  }

  dl:hover {
    cursor: pointer;
  }
}